<template>
  <view class="bg-gray-50 min-h-screen w-[750rpx] pb-[150rpx] box-border">
    <!-- 用户信息头部 -->
    <view
      class="bg-gradient-to-r from-blue-600 to-blue-800 text-white p-[40rpx] rounded-b-[40rpx] shadow-lg"
    >
      <view class="flex justify-between items-center mb-[30rpx]">
        <view class="flex items-center text-[28rpx]" @click="handleLocation">
          <IconFont name="location" class="mr-[10rpx]" />
          <text>南宁市</text>
        </view>
        <view
          @tap="handleSetting"
          class="w-[60rpx] h-[60rpx] bg-white bg-opacity-20 rounded-full flex items-center justify-center"
        >
          <!-- <IconFont name="tuichu" class="text-[30rpx]" /> -->
          <IconFont
            font-class-name="iconfont"
            class-prefix="icon"
            name="tuichu"
            size="20"
            color="#fff"
          />
        </view>
      </view>

      <view class="flex items-center mb-[30rpx]">
        <view
          class="w-[120rpx] h-[120rpx] rounded-full border-4 border-white border-opacity-30 bg-white overflow-hidden mr-[30rpx]"
          @tap="goinfo()"
        >
          <image :src="getFullPath(userInfo.avatar_url)" class="w-full h-full object-cover" />
        </view>
        <view class="flex-1">
          <view class="text-[40rpx] font-bold mb-[10rpx] flex items-center">
            <text>{{ userInfo.name}}</text>
            <view
              class="bg-gradient-to-r from-yellow-400 to-yellow-600 text-yellow-800 px-[15rpx] py-[5rpx] rounded-[20rpx] text-[24rpx] font-bold ml-[15rpx]"
            >
              {{ userInfo.vip ? userInfo.vip : "SVIP会员" }}
            </view>
          </view>
          <text class="text-[28rpx] opacity-90">
            平台ID:
            <text
              class="bg-white bg-opacity-20 px-[15rpx] py-[3rpx] rounded-[15rpx] text-[24rpx]"
              >{{ userInfo.imaccid ? userInfo.imaccid : "888888" }}</text
            >
          </text>
        </view>
      </view>

      <view
        class="bg-white bg-opacity-15 rounded-[20rpx] p-[25rpx] flex justify-between items-center"
      >
        <view class="text-center" @click="goToIncomeDetail">
          <text class="text-[26rpx] opacity-80 block mb-[10rpx]"
            >平台账户余额</text
          >
          <text class="text-[40rpx] font-bold"
            >¥ {{ userInfo.balance ? userInfo.balance : "8,568.50" }}</text
          >
        </view>
        <nut-button
          type="primary"
          size="small"
          class="bg-white text-blue-600 px-[40rpx] py-[15rpx] rounded-[50rpx] text-[28rpx] font-bold"
          @click="handleWithdraw"
        >
          提现到微信
        </nut-button>
      </view>
    </view>

    <!-- 实名认证卡片 -->
    <view
      class="bg-gradient-to-r from-blue-400 to-cyan-400 text-white rounded-[25rpx] p-[30rpx] m-[30rpx] flex items-center justify-between shadow-lg"
    >
      <view class="flex-1">
        <view class="text-[32rpx] font-bold flex items-center">
          <IconFont name="id-card" class="mr-[16rpx]" />
          <text>实名认证状态: </text>
          <text
            class="bg-green-500 px-[15rpx] py-[5rpx] rounded-[15rpx] text-[24rpx] ml-[15rpx]"
            >{{ userInfo.real_status ? userInfo.real_status : "已实名" }}</text
          >
        </view>
      </view>
      <nut-button
        type="default"
        size="small"
        class="bg-white text-blue-600 px-[40rpx] py-[15rpx] rounded-[50rpx] text-[28rpx] font-bold"
        @click="handleViewAuth"
      >
        查看详情
      </nut-button>
    </view>

    <!-- 功能入口卡片 -->
    <view class="bg-white rounded-[25rpx] p-[30rpx] m-[30rpx] shadow-lg">
      <view
        class="flex justify-between items-center mb-[30rpx] pb-[20rpx] border-b border-gray-100"
      >
        <text class="text-[34rpx] font-bold text-gray-800">我的功能</text>
        <IconFont name="th-large" class="text-blue-500 text-[40rpx]" />
      </view>

      <view class="grid grid-cols-4 gap-[30rpx]">
        <view
          v-for="(item, index) in functionItems"
          :key="index"
          class="flex flex-col items-center"
          @click="handleFunctionClick(item)"
        >
          <view
            class="w-[90rpx] h-[90rpx] bg-blue-50 rounded-[25rpx] flex items-center justify-center mb-[15rpx]"
          >
            <IconFont
              font-class-name="iconfont"
              class-prefix="icon"
              :name="item.icon"
              class="text-blue-500 text-[40rpx]"
              size="25"
            />
          </view>
          <text class="text-[26rpx] text-gray-600">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 会员等级卡片 -->
    <view class="bg-white rounded-[25rpx] p-[30rpx] m-[30rpx] shadow-lg">
      <view
        class="flex justify-between items-center mb-[30rpx] pb-[20rpx] border-b border-gray-100"
      >
        <text class="text-[34rpx] font-bold text-gray-800">会员等级与扣点</text>
        <IconFont name="crown" class="text-blue-500 text-[40rpx]" />
      </view>

      <view class="flex justify-between mb-[30rpx]">
        <view class="bg-gray-50 rounded-[20rpx] p-[30rpx] w-[48%] text-center">
          <text class="text-[32rpx] font-bold mb-[15rpx] block">普通会员</text>
          <text class="text-[48rpx] font-bold text-red-500 mb-[20rpx] block"
            >15%</text
          >
          <text class="text-[26rpx] text-gray-600">平台信息服务费比例</text>
        </view>

        <view class="bg-gray-50 rounded-[20rpx] p-[30rpx] w-[48%] text-center">
          <text class="text-[32rpx] font-bold mb-[15rpx] block">SVIP会员</text>
          <text class="text-[48rpx] font-bold text-red-500 mb-[20rpx] block"
            >5%</text
          >
          <text class="text-[26rpx] text-gray-600 mb-[20rpx] block"
            >平台信息服务费比例</text
          >
          <nut-button
            type="warning"
            size="small"
            class="w-full text-[28rpx] font-bold"
            @click="handleUpgrade"
          >
            立即升级
          </nut-button>
        </view>
      </view>

      <view class="mb-[20rpx]">
        <view
          class="flex justify-between mb-[10rpx] text-[26rpx] text-gray-600"
        >
          <text>本月提现额度</text>
          <text>¥ 8,568 / ¥ 15,000</text>
        </view>
        <view class="h-[20rpx] bg-gray-200 rounded-[10rpx] overflow-hidden">
          <view class="h-full bg-blue-500 rounded-[10rpx] w-[65%]"></view>
        </view>
      </view>
    </view>

    <!-- 推广卡片 -->
    <view
      class="bg-gradient-to-r from-purple-600 to-blue-500 text-white rounded-[25rpx] p-[30rpx] m-[30rpx] relative overflow-hidden"
    >
      <view
        class="absolute top-0 right-0 w-[200rpx] h-full bg-white bg-opacity-10 transform skew-x-[-20deg] origin-top-right"
      ></view>
      <view class="relative z-2">
        <text class="text-[36rpx] font-bold mb-[20rpx] block"
          >推广奖励计划</text
        >
        <text class="text-[28rpx] mb-[30rpx] block leading-[1.5]">
          邀请好友注册，获得二级分销奖励<br />
          推广会员消费您可获得提成，最高可达15%
        </text>
        <nut-button
          type="default"
          size="large"
          class="bg-white text-purple-600 px-[50rpx] py-[20rpx] rounded-[50rpx] text-[32rpx] font-bold mx-auto block"
          @click="handlePromotion"
        >
          立即推广
        </nut-button>
      </view>
    </view>

    <!-- 数据统计卡片 -->
    <view class="bg-white rounded-[25rpx] p-[30rpx] m-[30rpx] shadow-lg">
      <view
        class="flex justify-between items-center mb-[30rpx] pb-[20rpx] border-b border-gray-100"
      >
        <text class="text-[34rpx] font-bold text-gray-800">我的数据统计</text>
        <IconFont name="chart-pie" class="text-blue-500 text-[40rpx]" />
      </view>

      <view class="grid grid-cols-3 gap-[20rpx]">
        <view class="bg-gray-50 rounded-[20rpx] p-[25rpx] text-center">
          <text class="text-[40rpx] font-bold text-blue-500 mb-[10rpx] block"
            >128</text
          >
          <text class="text-[26rpx] text-gray-600">总推广会员</text>
        </view>
        <view class="bg-gray-50 rounded-[20rpx] p-[25rpx] text-center">
          <text class="text-[40rpx] font-bold text-blue-500 mb-[10rpx] block"
            >86</text
          >
          <text class="text-[26rpx] text-gray-600">已消费会员</text>
        </view>
        <view class="bg-gray-50 rounded-[20rpx] p-[25rpx] text-center">
          <text class="text-[40rpx] font-bold text-blue-500 mb-[10rpx] block"
            >¥3,856</text
          >
          <text class="text-[26rpx] text-gray-600">推广奖励</text>
        </view>
      </view>
    </view>

    <!-- 平台商家卡片 -->
    <view class="bg-white rounded-[25rpx] p-[30rpx] m-[30rpx] shadow-lg">
      <view
        class="flex justify-between items-center mb-[30rpx] pb-[20rpx] border-b border-gray-100"
      >
        <text class="text-[34rpx] font-bold text-gray-800">平台商家服务</text>
        <IconFont name="store" class="text-blue-500 text-[40rpx]" />
      </view>

      <view class="grid grid-cols-4 gap-[30rpx]">
        <view
          v-for="(item, index) in merchantItems"
          :key="index"
          class="flex flex-col items-center"
          @click="handleMerchantClick(item)"
        >
          <view
            class="w-[90rpx] h-[90rpx] bg-blue-50 rounded-[25rpx] flex items-center justify-center mb-[15rpx]"
          >
            <IconFont
              font-class-name="iconfont"
              class-prefix="icon"
              :name="item.icon"
              class="text-blue-500 text-[40rpx]"
              size="30"
            />
          </view>
          <text class="text-[26rpx] text-gray-600">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 底部导航 -->
    <!-- <view
      class="fixed bottom-0 left-0 w-[750rpx] bg-white flex justify-around py-[20rpx] shadow-lg z-100"
    >
      <view
        v-for="(nav, index) in navItems"
        :key="index"
        class="flex flex-col items-center text-[24rpx]"
        :class="nav.active ? 'text-blue-500' : 'text-gray-400'"
        @click="handleNavClick(nav.name)"
      >
        <IconFont :name="nav.icon" class="text-[40rpx] mb-[8rpx]" />
        <text>{{ nav.name }}</text>
      </view>
    </view> -->
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Taro,{useDidShow} from "@tarojs/taro";
import pic from "@/assets/pic/tx.jpeg";
import { IconFont } from "@nutui/icons-vue-taro";
import { useUserStore } from "@/store/user";
import { storeToRefs } from "pinia"
import {post,getFullPath} from "@/utils/request"

// 用户信息
const userStore = useUserStore();
const {userInfo} = storeToRefs(userStore);

const goinfo = () => {
  Taro.navigateTo({
    url: "/pages-detail/mine/myinfo",
  });
};

// 功能项目
const functionItems = ref([
  // {
  //   name: "我的任务",
  //   icon: "list-fourliebiao",
  //   url: "/pages/webs/task-details-reward-task-platform",
  // },
  {
    name: "我的订单",
    icon: "dingdan",
    url: "/pages/webs/order-acceptance-records",
  },
  // {
  //   name: "我的钱包",
  //   icon: "licai",
  //   url: "/pages/webs/promotion-statistics-center",
  // },
  // {
  //   name: "我的团队",
  //   icon: "tuandui",
  //   url: "/pages/webs/promotion-statistics-center",
  // },
  {
    name: "我的课程",
    icon: "jiaoyupeixunsvg",
    // url: "/pages/webs/training",
    url: "/pages/course/index",
  },
  {
    name: "用户简介",
    icon: "building",
    url: "/pages/mine/profile",
  },
  {
    name: "我的评价",
    icon: "pingjia",
    url: "/pages/webs/credit-level",
  },
  {
    name: "推广中心",
    icon: "tuiguangzhongxin",
    url: "/pages/webs/promotion-statistics-center",
  },  
  {
    name: "我的报名",
    icon: "xianxiabaoming",
    url: "pages/webs/my-application",
  },  
  {
    name: "我的发布",
    icon: "faburenwu",
    url: "pages/post/my-publish",
  },
]);

// 商家项目
const merchantItems = ref([
  {
    name: "成为商家",
    icon: "chengweishangjia",
    url: "/pages/webs/merchant-entry",
  },
  {
    name: "服务商",
    icon: "service-provider_fill",
    url: "/pages/webs/promotion-statistics-center",
  },
  {
    name: "培训商",
    icon: "peixunguanli",
    url: "/pages/webs/promotion-statistics-center",
  },
  {
    name: "传承商",
    icon: "a-xintuobeifen2",
    url: "/pages/webs/promotion-statistics-center",
  },
]);

// 底部导航
const navItems = ref([
  { name: "首页", icon: "home", active: false },
  { name: "任务", icon: "tasks", active: false },
  { name: "我的", icon: "user", active: true },
  { name: "消息", icon: "comments", active: false },
  { name: "更多", icon: "ellipsis-h", active: false },
]);

// 提现
const handleWithdraw = () => {
  // Taro.showToast({
  //   title: '提现申请已提交，将在1-3个工作日内到账',
  //   icon: 'success'
  // })
  Taro.navigateTo({
    url: "/pages/webs/withdraw",
  });
};

// 查看认证详情
const handleViewAuth = () => {
  // Taro.showToast({
  //   title: '实名认证信息：\n姓名：张推广达人\n身份证：450***************\n认证时间：2023-06-15',
  //   icon: 'none'
  // })
  Taro.navigateTo({
    url: "/pages-detail/mine/safe/index",
  });
};

// 升级会员
const handleUpgrade = () => {
  // Taro.showToast({
  //   title: '正在跳转SVIP会员升级页面',
  //   icon: 'none'
  // })
  Taro.navigateTo({
    url: "/pages/webs/member-recharge",
  });
};

// 推广
const handlePromotion = () => {
  Taro.navigateTo({
    url: "/pages/webs/promotion",
  });
};

// 功能点击
const handleFunctionClick = (item: object) => {
  // if (item.name == "推广中心") {
  //   Taro.navigateTo({
  //     url: item.url,
  //   });
  // }
  // if (item.name == "我的任务") {
  //   Taro.navigateTo({
  //     url: item.url,
  //   });
  // }
  Taro.navigateTo({
    url: item.url,
  });
};

// 商家点击
const handleMerchantClick = (item: object) => {
  if (item.name == "成为商家") {
    Taro.navigateTo({
      url: item.url,
    });
  }
};

// 选择地理位置
const handleLocation = () => {
  Taro.navigateTo({
    url: "/pages/webs/location-picker",
  });
};

// 导航点击
const handleNavClick = (name: string) => {
  navItems.value.forEach((item) => {
    item.active = item.name === name;
  });

  Taro.showToast({
    title: `切换到${name}`,
    icon: "none",
  });
};

const handleSetting = () => {
  Taro.removeStorageSync("token");
  Taro.navigateTo({
    url: "pages/webs/register",
  });
};

// 跳转到收入提现明细
const goToIncomeDetail = () => {
  Taro.navigateTo({
    url: "/pages/mine/income-detail",
  });
};
</script>
